<template>
  <div class="button-group" @keydown="onKeyDown">
    <div class="outter-circle">
      <div class="inner-parts brown" @click="button('up')">
        <span class="rotate">
          <img src="../../assets/img/向上1.png" style="width: 50px;height: 50px; margin-left: 20px;" alt="">
        </span>
      </div>
      <div class="inner-parts silver" @click="button('right')">
        <span class="rotate">
           <img src="../../assets/img/向上1.png"
                style="width: 50px;height: 50px; margin-left: 30px;transform: rotate(90deg);" alt="">
        </span>
      </div>
      <div class="inner-parts blue" @click="button('left')">
        <span class="rotate">
          <img src="../../assets/img/向上1.png"
               style="width: 50px;height: 50px; margin-left: 20px;transform: rotate(-90deg);" alt="">
        </span>
      </div>
      <div class="inner-parts gold" @click="button('un')">
        <span class="rotate">
          <img src="../../assets/img/向上1.png"
               style="width: 50px;height: 50px; margin-left: 30px;margin-bottom:-5px;transform: rotate(180deg);" alt="">
        </span>
      </div>

      <div class="inner-circle" @click="button('ok')">
        <span class="ok rotate"></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  props: { /* 4\. 通过属性接收父组件传过来的数据，属性是parent-fun, props中可以使用parentFun变量接收 */
    ws: null,
    // 发送消息方法
    sendMessage: null
  },
  mounted() {
    document.addEventListener("keydown", this.onKeyDown);
  },
  beforeDestroy() {
    document.removeEventListener("keydown", this.onKeyDown)
  },
  methods: {
    onKeyDown(event) {
      if (event.key === "w") {
        this.button("up")
      } else if (event.key === "s") {
        this.button("un")
      } else if(event.key === "a") {
        this.button("left")
      } else if(event.key === "d") {
        this.button("right")
      }
    },
    button(buttonType) {
      // 添加防抖处理
      const sendMessageDebounced = _.debounce((buttonType) => {
        switch (buttonType) {
          case 'right':
            this.sendMessage(4);
            break;
          case 'up':
            this.sendMessage(1);
            break;
          case 'left':
            this.sendMessage(3);
            break;
          case 'un':
            this.sendMessage(2);
            break;
          default:
            console.log('ok');
        }
      }, 5); // 迟500毫秒后再执行，连续快速按键只会愈发最后一次
      sendMessageDebounced(buttonType);
    }
  }
}
</script>

<style scoped>
@import "../../assets/css/homePage/remote.css";
</style>
